<template>
<span>
    <Button type="success" size="small" @click="handleClientAddShow">添加设备</Button>
    <Modal v-model="client_add_modal" title="添加设备" :mask-closable="false">
        <Form :model="client_current" :label-width="80">
            <FormItem label="设备名称">
                <Input v-model="client_current.client_name"></Input>
            </FormItem>
            <FormItem label="设备IP">
                <Input v-model="client_current.client_ip"></Input>
            </FormItem>
            <FormItem label="设备类型">
                <Input v-model="client_current.client_type"></Input>
            </FormItem>
            <FormItem label="设备信息">
                <Input v-model="client_current.client_info" type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
            </FormItem>
            <FormItem label="品牌型号">
                <!-- 下拉框-->
                <Select v-model="client_current.model">
                    <Option value="yanfei">联通雁飞</Option>
                </Select>
            </FormItem>
            <FormItem label="开启API">
                <i-switch v-model="client_current.api_enable" size="small"></i-switch>
            </FormItem>
            <FormItem label="API端口">
                <Input v-model="client_current.port" type="number"></Input>
            </FormItem>
            <FormItem label="API用户名">
                <Input v-model="client_current.username"></Input>
            </FormItem>
            <FormItem label="API密码">
                <Input v-model="client_current.password" type="password" password ></Input>
            </FormItem>
        </Form>
        <template #footer>
            <Button type="text" @click="handleClientAddCancel">取消</Button>
            <Button type="primary" @click="handleClientAddOk">确定</Button>
        </template>
    </Modal>
</span>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
    name: 'ClientAddButton',
    data() {
        return {
            client_add_modal: false,
            client_current: {
                id: 0,
                client_id: '',
                client_name: '',
                client_ip: '',
                client_type: '',
                client_info: '',
                tasks: [],
                alarm_plans: []
            },
        }
    },
    methods: {
        ...mapMutations(['setClientBriefValue']),
        handleClientAddShow() {
            this.client_current.id = '';
            this.client_current.client_id = '';
            this.client_current.client_name = '';
            this.client_current.client_ip = '';
            this.client_current.client_info = '';
            this.client_current.client_type = '';
            this.client_current.client_alive_time = '';
            this.client_current.model = '';
            this.client_current.port = 80;
            this.client_current.username = '';
            this.client_current.password = '';
            this.client_current.api_enable = false;
            this.client_add_modal = true;
        },
        handleClientAddOk() {
            this.$http.post('/add_client', this.client_current).then(res => {
                if (res.status == 'ok') {
                    this.$Message.success('添加成功');
                    this.client_add_modal = false;
                    let client_id = res.data;
                    this.setClientBriefValue(client_id, this.client_current.client_name);
                    this.$emit('success', client_id);
                }else {
                    this.errorMessage('添加失败');
                }
            });
        },
        handleClientAddCancel() {
            this.client_add_modal = false;
        },
    }
}
</script>